<script setup>
	import {ref} from 'vue'
	
	const props = defineProps({
		scaleList:Array,
		scaleArray:Array
	})
	const scale = ['♦','♣','♥','♠']
	const btnColor = ref(['#eb6661','#5c5c5c','#b33028','#202020'])
	const emit = defineEmits(['setCancel','handlerConfirmSeet'])
</script>

<template>
	<u-modal :show="true"  width="650rpx" showCancelButton cancelText="设置"
		@confirm="emit('handlerConfirmSeet')" title="当前牌数比例" cancelColor="#ffbb17" @cancel="emit('setCancel')">
		<view class="slot-content">
			<view class="title"> 1 - 13 张的比例</view>
			<view class="list">
				<text class="item flex" v-for="(item,index) in scaleList" :key="index">{{ index + 1  }}:{{item}}</text>
			</view>
			<view class="title" style="margin-top: 20rpx;">方块2梅花2-红桃2-黑桃2</view>
			<view class="list2">
				<view class="item flex"  v-for="(item,index) in scaleArray" :key="index">
				<text :style="{color:btnColor[index]}">{{scale[index]}}:</text>
				{{item}}</view>
			</view>
		</view>
	</u-modal>
</template>

<style scoped lang="scss">
	.list{
		  display: grid;
		   grid-template-columns: repeat(5, 1fr); 
		   grid-gap: 10rpx;
		   row-gap: 15rpx; 
		.item{
			padding: 3rpx 8rpx;
			border: 1px solid #eee;
		}
	}
	.list2{
		display: flex;
		justify-content: space-between;
		.item{
			padding: 3rpx 20rpx;
			border: 1px solid #eee;
		}
	}
	.title{
		margin-bottom: 20rpx;
		color: #000;
		font-weight: 700;
		font-size: 40rpx;
	}
</style>